<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360开关机动画</title>
</head>
<script src="./jquery-3.2.1.min.js"></script>
<body>
    <div class="box" id="box">
        <span id="closeButton">x</span>
        <div class="hd" id="headPart">
            <img src="./img/02-1.JPG" alt="">
        </div>
        <div class="bd" id="bottomPart">
            <img src="./img/02-2.JPG" alt="">
        </div>
    </div>
    <script>
        $(function () {
        	$('#closeButton').click(function () {
        	    $('#bottomPart').animate({
        	        height: 0
        	    }, 500, function () {
        	        $('#box').animate({
        	            width: 0
        	        }, 1000);
        	      });
        	    });
        	  });
	</script>
       
</body>
</html>